<template>
	<view class="product-box">
		<view class="products-container" :key="productId">
			<view v-for="(item, index) in styleList" :key="index" :class="[
				'product-item',
				styleList.length >= 18 ? 'three-per-row' : 'two-per-row',
				{ 'animate': animatedIndex >= index },
				{ 'blurred': item.isBlurred }
			]" :style="getAnimationDelay(index)" @click="handleItemClick(item)">

				<!-- <view :class="[
					'product-item',
					styleList.length >= 18 ? 'three-per-row' : 'two-per-row',
					{ 'animate': animatedIndex >= index }, { 'blurred': item.isBlurred }]"> -->
					<view v-show="item.styleAvatarUrl">
						<image :src="item.styleAvatarUrl" :class="styleList.length >= 18 ? 'img-style3' : 'img-style2'"
							mode="aspectFill"></image>
					</view>
					<view v-show="!item.styleAvatarUrl">
						<!-- <p style="text-align: center;line-height: 6.5rem;">{{$t('NoPicture')}}</p> -->
					</view>
					<view class="name-style">{{ item.productName }}</view>
				<!-- </view> -->

				<!-- 按钮，默认隐藏，当item.isBlurred为true时显示 -->
				<!-- <button v-if="item.isBlurred" class="buy-btn" @click.stop="handleBuy(item)">
					我想要
				</button> -->
				<u-button v-if="item.isBlurred" type="" size="small" class="buy-btn" :text="'我想要'"
					@click.stop="handleBuy(item)"></u-button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from "vue";
import { useCommonStore } from "../stores/useCommonStore";
import { StyleImg } from "../types/types";

const commonStore = useCommonStore();
const productId = computed(() => commonStore.nowSelectedId);
const styleList = computed(() => commonStore.styleList);

// 控制动画播放进度
const animatedIndex = ref(-1);

// 模拟逐个显示动画
const startAnimation = () => {
	if (!styleList.value.length) return;
	let i = 0;
	const timer = setInterval(() => {
		animatedIndex.value = i;
		i++;
		if (i >= styleList.value.length) {
			clearInterval(timer);
		}
	}, 100); // 每 100ms 显示一个元素
};

// 点击列表项
const handleItemClick = (item) => {
	// 重置所有项的模糊状态
	commonStore.toggleItemBlur(item.productName) // 调用 Store 的方法修改
}

// 我想要按钮点击
const handleBuy = (item) => {
	console.log('我想要');

	// 这里可以添加购买逻辑
}

// 数据更新后重新启动动画
watch(
	() => styleList.value,
	() => {
		animatedIndex.value = -1; // 重置动画
		setTimeout(startAnimation, 100);
	},
	{ deep: true }
);

onMounted(() => {
	startAnimation();
});

// 计算每个项目的动画延迟（仅用于样式展示，实际动画由 animatedIndex 控制）
const getAnimationDelay = (index: number) => {
	const itemsPerRow = styleList.value.length > 12 ? 3 : 2;
	const row = Math.floor(index / itemsPerRow);
	return {
		animationDelay: `${row * 0.1}s`,
	};
};
</script>

<style scoped lang="scss">
.product-box {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: auto;
	padding: 0.25rem;
}

.products-container {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

// .product-item {
// 	overflow: hidden;
// 	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
// 	box-sizing: border-box;
// 	margin: 0.25rem;
// 	border-radius: 0.31rem;
// 	opacity: 0;
// 	transform: translateY(-100%);
// 	position: relative;

// 	/* 默认隐藏 */
// 	&.animate {
// 		opacity: 1;
// 		transform: translateY(0);
// 		animation: slideDown 0.3s ease-out forwards;
// 	}
// }
.product-item {
	opacity: 0; // 初始状态设为透明
	overflow: hidden;
	animation: slideDown 0.3s ease-out forwards; // 使用 forwards 保持最终状态
	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
	border-radius: 0.31rem;
	position: relative;
}

.two-per-row {
	margin: 0 0.5rem 1rem; //0620
	width: calc((100% - 2rem) / 2);
	height: 6.7rem;
}

.three-per-row {
	margin: 0 0.5rem 1rem; //0620
	width: calc((100% - 3rem) / 3);
	height: 6.88rem;
}

.img-style2 {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.img-style3 {
	/*130%*/
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.name-style {
	width: 100%;
	height: 46rpx;
	line-height: 46rpx;
	text-align: center;
	background-color: rgba(79, 79, 79, 0.82);
	color: #fff;
	font-size: 14px;
	position: absolute;
	bottom: 0;
	/*left: 50%;
	/transform: translate(-50%);*/
	z-index: 100;
}

/* 下滑动画关键帧 */
@keyframes slideDown {
	0% {
		opacity: 0;
		transform: translateY(-100%);
	}

	70% {
		opacity: 1;
		transform: translateY(0);
	}

	80% {
		opacity: 1;
		transform: translateY(-1.2rem);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 给每一个 .product-item 设置不同的动画延迟 */
.product-item:nth-child(1) {
	animation-delay: 0.1s;
}

.product-item:nth-child(2) {
	animation-delay: 0.2s;
}

.product-item:nth-child(3) {
	animation-delay: 0.3s;
}

/* 根据实际需要添加更多的 nth-child 规则 */

/* 确保离开动画平滑且不残留 */
.slide-leave-active {
	transition: all 0.3s ease-out;
}

.slide-leave-to {
	opacity: 0;
	transform: translateY(-100%);
}

/* 确保移动动画平滑 */
.slide-move {
	transition: transform 0.3s ease-out;
}

/* 模糊效果 */
.blurred {
	filter: blur(2px);
	opacity: 0.8;
	position: relative;
}

/* 购买按钮样式 */
.buy-btn {
	width: 70%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #ff5a5f;
	color: white;
	border: none;
	border-radius: 20px;
	padding: 8px 16px;
	z-index: 1000;
}

/* 确保模糊效果不会影响按钮点击 */
.product-item {
	position: relative;
	overflow: hidden;
}
</style>